<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>商品支付</title>
    <base href="http://localhost/campus/">
    <script type="text/javascript" src="static/js/jquery.qrcode.min.js"></script>
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon"/>
</head>
<body>
<c:if test="${order.purchaseWay == 0}">
    ${payForm}
</c:if>
<c:if test="${order.purchaseWay == 1}">
    <div class="order_info_nav">订单详情</div>
    <div>
        <div style="width: 60%;display: flex;">
            <div class="order_payment_detail_item" style="text-align: right;">
                <span>订单号：</span>
                <span>状态：</span>
                <span>总价格：</span>
                <span>支付方式：</span>
                <span>下单时间：</span>
                <span>购买人：</span>
                <span>联系电话：</span>
                <span>地址：</span>
            </div>
            <div class="order_payment_detail_item" style="padding-left: 0;">
                <span>${order.orderId}</span>
                <span style="color: #fca130;">待付款</span>
                <span style="color: red">${totalPrice}</span>
                <span>${order.purchaseWay == 0 ? "支付宝" :"微信"}</span>
                <span style="color: #007DDB">${order.stringPurchaseTime}</span>
                <span>${order.purchaseUserName}</span>
                <span>${order.purchaserPhone}</span>
                <span>${order.address}</span>
            </div>
        </div>
        <div style="width: 60%;height: 30px;text-align: center;padding-top: 15px;">
            <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="deleteOrder('${order.orderId}')">取消
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="paySuccess()">支付</button>
        </div>
        <div style="float:right;margin: -26% 20%;">

            <div id="qrcode"></div>
            <p id="qrcode_warning" style="color: darkblue;font-size: 18px;text-align: center;line-height: 42px;"></p>

        </div>
    </div>
</c:if>
<script>
    var layer = null;
    layui.use('layer', function () {
        layer = layui.layer;
    });

    function deleteOrder(orderId) {
        layer.confirm("确定取消此订单?", {
            icon: 3
            , title: "提示"
        }, function (index) {
            $.ajax({
                url: "http://localhost/campus/order/deleteOrder"
                , type: "POST"
                , data: "orderId=" + orderId + "&isBack=true"
                , success: function (data) {
                    let icon = data.success ? 1 : 2;
                    layer.msg(data.message, {
                        icon: icon
                        , time: 2000
                    });
                }
                , error: function (e) {

                }
            });
            window.location.href = "http://localhost/campus/product/list"
            layer.close(index);
        });
    }

    function paySuccess() {
        let code_url = '${qrcode.code_url}';
        let qrcodeValue = $("#qrcode_warning").text();
        if (qrcodeValue === "") {
            generateQRCode("table", 200, 200, code_url);
            $("#qrcode_warning").text("请用微信扫一扫");
        }
    }

    function generateQRCode(renderMethod, picWidth, picHeight, url) {
        $("#qrcode").qrcode({
            render: renderMethod, // 渲染方式有table方式（IE兼容）和canvas方式
            width: picWidth, //宽度
            height: picHeight, //高度
            text: utf16to8(url), //内容
            typeNumber: -1,//计算模式
            correctLevel: 2,//二维码纠错级别
            background: "#ffffff",//背景颜色
            foreground: "#000000"  //二维码颜色
        });
    }

    //中文编码格式转换
    function utf16to8(str) {
        var out, i, len, c;
        out = "";
        len = str.length;
        for (i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                out += str.charAt(i);
            } else if (c > 0x07FF) {
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
        }
        return out;
    }

    function updateState() {
        let orderId = '${order.orderId}';
        let qrcodeValue = $("#qrcode_warning").text();
        if (qrcodeValue !== "")
            $.ajax({
                url: "http://localhost/campus/order/queryPayStatus/" + orderId
                , type: "GET"
                , success: function (res) {
                    if (res.success && res.code != 25000) {
                        window.location.href = "http://localhost/campus/order/paySuccess?orderId=" + orderId
                    } else {
                        $("#qrcode_warning").text(res.message);
                    }
                }
            });
    }

    setInterval("updateState()", 1000);
</script>
</body>
</html>
